<template>
  <div class="main-container" v-loading="loadingElplus">
    <!-- 流程卡 -->
    <div style="background-color: #fff; height: 100%; position: relative">
      <div class="potion">{{ timer }}</div>
      <div class="titlesAcl">
        <div
          class="polang"
          style="background: #69f"
          @click="onToCilck('/pcsingmagent/orderpurchase', '1')"
        >
          <span style="margin-top: -20px">新建需求单</span>
          <span class="right-span">
            <span class="titlesAcl2"></span>
          </span>
          <svg xmlns="http://www.w3.org/2000/svg" class="po-bottom" viewBox="0 0 1440 320">
            <path
              fill="#cff0ee"
              fill-opacity="1"
              d="M0,288L60,293.3C120,299,240,309,360,293.3C480,277,600,235,720,186.7C840,139,960,85,1080,69.3C1200,53,1320,75,1380,85.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
            ></path>
          </svg>
        </div>
        <div class="polang fc6" @click="onToCilck('/pcsingmagent/orderpurchase', '2')">
          <span style="margin-top: -20px">需求单审核</span>
          <span class="right-span">
            <span class="titlesAcl2"></span>
          </span>
          <svg xmlns="http://www.w3.org/2000/svg" class="po-bottom" viewBox="0 0 1440 320">
            <path
              fill="#cff0ee"
              fill-opacity="1"
              d="M0,288L60,293.3C120,299,240,309,360,293.3C480,277,600,235,720,186.7C840,139,960,85,1080,69.3C1200,53,1320,75,1380,85.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
            ></path>
          </svg>
        </div>
        <div
          class="polang"
          style="background: #3c9"
          @click="onToCilck('/pcsingmagent/Purchase', '1')"
        >
          <span style="margin-top: -20px">申购单建立</span>
          <span class="right-span">
            <span class="titlesAcl2"></span>
          </span>
          <svg xmlns="http://www.w3.org/2000/svg" class="po-bottom" viewBox="0 0 1440 320">
            <path
              fill="#cff0ee"
              fill-opacity="1"
              d="M0,288L60,293.3C120,299,240,309,360,293.3C480,277,600,235,720,186.7C840,139,960,85,1080,69.3C1200,53,1320,75,1380,85.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
            ></path>
          </svg>
        </div>
        <div class="polang fc6" @click="onToCilck('/pcsingmagent/Purchase', '2')">
          <span style="margin-top: -20px">申购单审核</span>
          <span class="right-span">
            <span class="titlesAcl2"></span>
          </span>
          <svg xmlns="http://www.w3.org/2000/svg" class="po-bottom" viewBox="0 0 1440 320">
            <path
              fill="#cff0ee"
              fill-opacity="1"
              d="M0,288L60,293.3C120,299,240,309,360,293.3C480,277,600,235,720,186.7C840,139,960,85,1080,69.3C1200,53,1320,75,1380,85.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
            ></path>
          </svg>
        </div>
        <div
          class="polang"
          style="background: #3c9"
          @click="onToCilck('/pcsingmagent/PurchaseCg', '4')"
        >
          <span style="margin-top: -20px">采购单建立</span>
          <span class="right-span">
            <span class="titlesAcl2"></span>
          </span>
          <svg xmlns="http://www.w3.org/2000/svg" class="po-bottom" viewBox="0 0 1440 320">
            <path
              fill="#cff0ee"
              fill-opacity="1"
              d="M0,288L60,293.3C120,299,240,309,360,293.3C480,277,600,235,720,186.7C840,139,960,85,1080,69.3C1200,53,1320,75,1380,85.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
            ></path>
          </svg>
        </div>
        <div class="polang fc6" @click="onToCilck('/pcsingmagent/PurchaseCg', '5')">
          <span style="margin-top: -20px">采购单审核</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="po-bottom" viewBox="0 0 1440 320">
            <path
              fill="#cff0ee"
              fill-opacity="1"
              d="M0,288L60,293.3C120,299,240,309,360,293.3C480,277,600,235,720,186.7C840,139,960,85,1080,69.3C1200,53,1320,75,1380,85.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
            ></path>
          </svg>
        </div>
      </div>
      <!-- <div class="cencters">
                <div ref="myChart" :style="{ width: '450px', height: '450px' }"></div>
                <div ref="myChart2" :style="{ width: '450px', height: '450px' }"></div>
                <div ref="myChart3" :style="{ width: '450px', height: '450px' }"></div>
            </div> -->
      <a-tabs   :lazy-load="true" default-active-key="1">
        <a-tab-pane key="1" title="卡片">
          <div class="jz">
            <div class="jzys">
              <div class="jzys-title">
                <span>需求单</span>
              </div>
              <!-- 1 -->
              <div class="contenter-sty">
                <div class="sty-bj">
                  <div>已创建需求单据个数: {{ dataList.needNum ? dataList.needNum : 0 }}</div>
                </div>
              </div>
              <div class="contenter-sty">
                <div class="sty-bj" @click="onToCilck('/pcsingmagent/Purchase', '1', '3')">
                  <div>已转申购单据个数: {{ dataList.needState ? dataList.needState : 0 }}</div>
                </div>
              </div>
              <div class="contenter-sty">
                <div class="sty-bj" @click="onToCilck('/pcsingmagent/Purchase', '1', '1')">
                  <div>未转需求单据个数: {{ dataList.needNo ? dataList.needNo : 0 }}</div>
                </div>
              </div>
            </div>
            <div class="jzys">
              <div class="jzys-title">
                <span>申购单</span>
              </div>
              <div class="contenter-sty">
                <!-- 1 -->
                <div class="sty-bj">
                  <div>已创建申购单据个数: {{ dataList.applyNum ? dataList.applyNum : 0 }}</div>
                </div>
              </div>
              <!-- <div class="contenter-sty">
                                <div class="sty-bj">
                                    <div to="">已建立: 15</div>
                                </div>
                            </div> -->
              <div class="contenter-sty">
                <div class="sty-bj" @click="onToCilck('/pcsingmagent/PurchaseCg', '4', '3')">
                  <div>已转采购单据个数: {{ dataList.applyState ? dataList.applyState : 0 }}</div>
                </div>
              </div>
              <div class="contenter-sty">
                <div class="sty-bj" @click="onToCilck('/pcsingmagent/PurchaseCg', '4', '1')">
                  <div>未转申购单据个数: {{ dataList.applyNo ? dataList.applyNo : 0 }}</div>
                </div>
              </div>
            </div>
            <div class="jzys">
              <div class="jzys-title">
                <span>采购单</span>
              </div>
              <div class="contenter-sty">
                <!-- 4 -->
                <div class="sty-bj">
                  <div>已创建采购单据个数: {{ dataList.orderNum ? dataList.orderNum : 0 }}</div>
                </div>
              </div>
              <div class="contenter-sty">
                <div class="sty-bj" >
                  <div
                    >已收货的采购单据个数: {{ dataList.orderState ? dataList.orderState : 0 }}</div
                  >
                </div>
              </div>
              <div class="contenter-sty">
                <div class="sty-bj" >
                  <div>未收货的采购单据个数: {{ dataList.orderNo ? dataList.orderNo : 0 }}</div>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="饼图">
          <div class="cencters">
            <div ref="myChart" :style="{ width: '450px', height: '450px' }"></div>
            <div ref="myChart2" :style="{ width: '450px', height: '450px' }"></div>
            <div ref="myChart3" :style="{ width: '450px', height: '450px' }"></div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { post } from '@/api/http'
import { da } from 'element-plus/es/locale'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { inflate } from 'zlib'
import usePermission from "@/store/modules/permission";
export default defineComponent({
  name: 'pcsingmagentTaskFlow',
  setup() {
    const permissionStore = usePermission()

    const loadingElplus = ref<Boolean>(false)
    let timer = ref<any>(120)
    const router = useRouter()
    const myChart = ref<any>()
    const myChart2 = ref<any>()
    const myChart3 = ref<any>()
    let dataList: any = ref({
      needNum: '0',
      needState: '0',
      needNo: '0',
      applyNum: '0',
      applyState: '0',
      applyNo: '0',
      orderNum: '0',
      orderState: '0',
      orderNo: '0',
    })
    let onToCilck = (path: string, key: string, name?: string) => {
      router.push({ path, query: { key, name } })
    }
    let getDte = async () => {
      try {
        loadingElplus.value = true
        let res: any = await post({ url: '/purchase/aggregate/getList' })
        if (res.code == 200) {
          dataList.value = res.data
          getEcharts()
          getTimer()
          return
        }
        Message.error(res.message)
      } catch (error: any) {
        loadingElplus.value = false
      } finally {
        loadingElplus.value = false
      }
    }
    let getTimer = () => {
      setInterval(async () => {
        if (timer.value == 0) {
          timer.value = 10
          let res: any = await post({ url: '/purchase/aggregate/getList' })
          if (!res.code || res.code !== 200) {
            Message.error(res.message)
            return
          }
          dataList.value = res.data
          let option = {
            series: [
              {
                data: [
                  {
                    value: dataList.value.needState ? dataList.value.needState : 0,
                    name: '已审核',
                  },
                  { value: dataList.value.needNo ? dataList.value.needNo : 0, name: '未审核' },
                ],
              },
            ],
          }
          echartsDom.echarts1.setOption(option)
          let option1 = {
            series: [
              {
                data: [
                  {
                    value: dataList.value.applyState ? dataList.value.applyState : 0,
                    name: '已审核',
                  },
                  { value: dataList.value.applyNo ? dataList.value.applyNo : 0, name: '未审核' },
                ],
              },
            ],
          }
          echartsDom.echarts2.setOption(option1)
          let option2 = {
            series: [
              {
                data: [
                  {
                    value: dataList.value.orderState ? dataList.value.orderState : 0,
                    name: '已审核',
                  },
                  { value: dataList.value.orderNo ? dataList.value.orderNo : 0, name: '未审核' },
                ],
              },
            ],
          }
          echartsDom.echarts3.setOption(option2)
        } else {
          timer.value--
        }
      }, 1000)
    }
    interface Emo {
      echarts1: any
      echarts2: any
      echarts3: any
    }
    const echartsDom = reactive<Emo>({
      echarts1: '',
      echarts2: '',
      echarts3: '',
    })
    let getEcharts = () => {
      setTimeout(() => {
        // 绘制图表
        echartsDom.echarts1 = echarts.init(myChart.value!)
        echartsDom.echarts1.setOption({
          title: {
            text: '需求单',
            subtext: '已建立' + dataList.value.needNum ? dataList.value.needNum : 0,
            left: 'center',
            subtextStyle: {
              color: '#5e8af5',
              fontWeight: 800,
              fontSize: 20,
            },
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'rich',
          },
          color: ['#91cc75', '#eacc4e'],
          series: [
            {
              name: '需求单',
              type: 'pie',
              radius: '48%',
              label: {
                show: true,
                formatter: '{b} : {c}', // b代表名称，c代表对应值，d代表百分比
              },
              data: [
                { value: dataList.value.needState ? dataList.value.needState : 0, name: '已审核' },
                { value: dataList.value.needNo ? dataList.value.needNo : 0, name: '未审核' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        })
        echartsDom.echarts1.on('click', (a: any) => {
          const { name } = a
          if (name == '已审核') {
            router.push({ path: '/pcsingmagent/orderpurchase', query: { key: '1' } })
          }
          if (name == '未审核') {
            router.push({ path: '/pcsingmagent/orderpurchase', query: { key: '2' } })
          }
        })
        echartsDom.echarts2 = echarts.init(myChart2.value!)
        echartsDom.echarts2.setOption({
          title: {
            text: '申购单',
            subtext: '总任务' + dataList.value.applyNum ? dataList.value.applyNum : 0,
            left: 'center',
            subtextStyle: {
              color: '#5e8af5',
              fontWeight: 800,
              fontSize: 20,
            },
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'rich',
          },
          color: ['#91cc75', '#eacc4e'],
          series: [
            {
              name: '申购单',
              type: 'pie',
              radius: '48%',
              label: {
                show: true,
                formatter: '{b} : {c}', // b代表名称，c代表对应值，d代表百分比
              },
              data: [
                // { value: 15, name: '已建立' },
                {
                  value: dataList.value.applyState ? dataList.value.applyState : 0,
                  name: '已审核',
                },
                { value: dataList.value.applyNo ? dataList.value.applyNo : 0, name: '未审核' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        })
        echartsDom.echarts2.on('click', (a: any) => {
          const { name } = a
          if (name == '已审核') {
            router.push({ path: '/pcsingmagent/Purchase', query: { key: '3' } })
          }
          if (name == '未审核') {
            router.push({ path: '/pcsingmagent/Purchase', query: { key: '2' } })
          }
        })
        echartsDom.echarts3 = echarts.init(myChart3.value!)
        echartsDom.echarts3.setOption({
          title: {
            text: '采购单',
            subtext: '总任务' + dataList.value.orderNum ? dataList.value.orderNum : 0,
            left: 'center',
            subtextStyle: {
              color: '#5e8af5',
              fontWeight: 800,
              fontSize: 20,
            },
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'rich',
          },
          color: ['#91cc75', '#eacc4e'],
          series: [
            {
              name: '采购单',
              type: 'pie',
              radius: '48%',
              label: {
                show: true,
                formatter: '{b} : {c}', // b代表名称，c代表对应值，d代表百分比
              },
              data: [
                // { value: 10, name: '已建立' },
                {
                  value: dataList.value.orderState ? dataList.value.orderState : 0,
                  name: '已审核',
                },
                { value: dataList.value.orderNo ? dataList.value.orderNo : 0, name: '未审核' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        })
        echartsDom.echarts3.on('click', (a: any) => {
          const { name } = a
          if (name == '已审核') {
            router.push({ path: '/pcsingmagent/PurchaseCg', query: { key: '6' } })
          }
          if (name == '未审核') {
            router.push({ path: '/pcsingmagent/PurchaseCg', query: { key: '5' } })
          }
        })
      }, 10)
    }
    onMounted(() => {
      getDte()
    })
    return {
      permissionStore,
      getDte,
      myChart,
      myChart2,
      myChart3,
      dataList,
      getEcharts,
      timer,
      getTimer,
      onToCilck,
      loadingElplus,
      echartsDom,
    }
  },
})
</script>
<style scoped lang="less">
.main-container {
  height: 100%;
}

.titlesAcl {
  background-color: #cff0ee;
  height: 20%;
  width: 95%;
  margin: 0 auto;
  position: relative;
  top: 20px;
  margin-bottom: 15px;
  box-shadow: 0px 7px 15px -3px #d4d4d4;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 30px;

  div:hover {
    font-size: 20px;
    cursor: pointer;
  }
}

.cencters {
  width: 100%;
  height: 60%;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}
.jzys {
  width: 300px;
  height: 420px;
  position: relative;
  border: 1px solid #5e8af5;
  box-shadow: 0px 7px 15px -3px #d4d4d4;
}

.jzys-title {
  height: 60px;
  background-color: #5e8af5;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
}

.contenter-sty {
  font-size: 18px;
  color: #707070;
  cursor: pointer;
}

.sty-bj {
  width: 270px;
  margin: 0 auto;
  padding: 30px 0;
  text-align: center;
  border-bottom: 2px dashed #d4d4d4;
}

.contenter-sty:hover {
  background-color: #f7f8fa;
}
.jz {
  width: 100%;
  height: 60%;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
}
.potion {
  color: #000;
  position: absolute;
  right: 0px;
  top: 160px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  // align-items: center;
}
.polang {
  width: 120px;
  height: 65px;
  background: #000;
  position: relative;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}
.po-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}
.fc6 {
  background: #fc6;
  color: #333;
}
.right-span {
  background: #0399cc;
  width: 70px;
  height: 2px;
  position: absolute;
  left: 135px;
}
.titlesAcl2 {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid #5e8af5;
  border-top: 8px solid #cff0ee;
  border-bottom: 10px solid #cff0ee;
  border-radius: 0;
  left: 68px;
  bottom: -8px;
  box-shadow: none;
}
</style>